<script setup>
import { Edit, Delete } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { newsGetlist, newsDel, newsGetType } from '@/api/news.js'
import { onMounted } from 'vue'

// 新闻栏目下拉框
const value = ref('')
const options = [
  { label: '政治', value: '政治' },
  { label: '经济', value: '经济' },
  { label: '科技', value: '科技' },
  { label: '社会', value: '社会' },
  { label: '娱乐', value: '娱乐' },
  { label: '文化', value: '文化' },
  { label: '健康', value: '健康' },
  { label: '科学', value: '科学' },
  { label: '体育', value: '体育' },
  { label: '教育', value: '教育' },
  { label: '国际', value: '国际' },
  { label: '环境', value: '环境' },
  { label: '习言道', value: '习言道' },
  { label: '战略军事', value: '战略军事' },
  { label: '人文历史', value: '人文历史' }
]

// 渲染界面加载
const loading = ref(true)
// 渲染数据
const newsList = ref()
const tableData = ref()
onMounted(async () => {
  loading.value = true
  const res = await newsGetlist(1)
  newsList.value = res.data.data
  tableData.value = newsList.value.rows
  loading.value = false
  console.log(newsList.value)
})
// 分页渲染
const handleCurrentChange = async (val) => {
  console.log('当前页: ' + val)
  loading.value = true
  const res = await newsGetType(val, value.value, '')
  newsList.value = res.data.data
  tableData.value = newsList.value.rows
  loading.value = false
}
// 查询渲染.暂时..
const onSearch = async () => {
  handleCurrentChange(1)
}
// 重置
const onReset = async () => {
  value.value = ''
  handleCurrentChange(1)
}

// 绑定EditDrawer组件，可以对其暴露的方法直接引用
const articleEditRef = ref()
// 添加新闻
const onAddNews = () => {
  if (articleEditRef.value) {
    articleEditRef.value.open({})
  } else {
    console.error('EditDrawer组件还没有被挂载')
  }
}
// 编辑新闻
const onEditNews = (row) => {
  articleEditRef.value.open(row)
}
// 删除新闻
const onDelNews = async (row) => {
  // 提示用户是否要删除
  await ElMessageBox.confirm('此操作将永久删除该新闻, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await newsDel(row.newsId)
  ElMessage.success('删除成功')
  //重新渲染
  handleCurrentChange(newsList.value.currentPages)
}
</script>

<template>
  <AdminNewsPage title="新闻管理">
    <template #operate>
      <el-button type="primary" @click="onAddNews">发布新闻</el-button>
    </template>

    <!-- 搜索区域 -->
    <el-form inline>
      <el-form-item label="新闻栏目:">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="发布状态:">
        <el-select>
          <el-option label="审核中" value="审核中"></el-option>
          <el-option label="已通过" value="已通过"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="作者:">
        <el-input placeholder="请输入作者"> </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="onSearch" type="primary">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 新闻列表 -->
    <el-table v-loading="loading" :data="tableData" style="width: 100%" max-height="565">
      <el-table-column fixed type="expand">
        <template #default>
          <div m="4">
            <p m="t-0 b-2">新闻内容</p>
            <p m="t-0 b-2">评论信息</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column type="index" label="序号" width="70"></el-table-column>
      <el-table-column prop="title" label="新闻标题" width="480"></el-table-column>
      <el-table-column prop="author" label="作者"></el-table-column>
      <el-table-column prop="newsType" label="栏目"></el-table-column>
      <el-table-column prop="number" label="浏览量"></el-table-column>
      <el-table-column prop="publishTime" label="发布时间" width="200"></el-table-column>
      <el-table-column prop="zt" label="状态">已发布</el-table-column>
      <el-table-column label="操作" width="150">
        <!-- row 就是 channelList 的一项， $index 下标 -->
        <template #default="{ row }">
          <el-button
            :icon="Edit"
            circle
            plain
            type="primary"
            @click="onEditNews(row)"
          ></el-button>
          <el-button
            :icon="Delete"
            circle
            plain
            type="danger"
            @click="onDelNews(row)"
          ></el-button>
        </template>
      </el-table-column>

      <template #empty>
        <el-empty description="没有数据"></el-empty>
      </template>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      v-if="newsList"
      :page-size="1"
      :pager-count="10"
      layout="total, prev, pager, next, jumper"
      :total="newsList.pageNumber"
      @current-change="handleCurrentChange"
      style="margin: 30px; justify-content: flex-end"
    />

    <!-- 编辑抽屉 -->
    <EditDrawer ref="articleEditRef"></EditDrawer>
  </AdminNewsPage>
</template>

<style lang="scss" scoped></style>
